<template>
	<view>
		<van-nav-bar @click-left="$back" left-arrow title="我的订单" :border="false" />
		<scroll-view @scrolltolower="handleLower" @refresherrefresh="handleRefresh" refresher-enabled
			:refresher-triggered="trigger" scroll-y :style="{height: height, backgroundColor: '#f8f8f8'}">
			<van-tabs line-width="60px" :active="active" @change="onChange">
				<van-tab title="已完成">
					<view class="my-orders-box">
						<view class="my-orders-item">
							<view class="my-orders-item-title">
								<text class="my-orders-item-title-l">32号桌</text>
								<text class="my-orders-item-title-r">已完成</text>
							</view>
							<view class="my-orders-item-content">
								<view class="my-orders-item-content-l">
									<scroll-view scroll-x style="width: calc(100vw - 200rpx);height: 100%;white-space: nowrap;">
										<view class="my-orders-item-scroll" v-for="i in 8" :key="i">
											<van-image radius="8rpx" width="100rpx" height="100rpx" src="https://img.yzcdn.cn/vant/cat.jpeg" />
											<view class="my-orders-item-scroll-title">醉逍遥</view>
										</view>
									</scroll-view>
								</view>
								<view class="my-orders-item-content-r">
									<text class="my-orders-item-content-r2">共</text>
									<text class="my-orders-item-content-r2" style="font-weight: bold;color: #000000;">170</text>
									<text class="my-orders-item-content-r2">件</text>
								</view>
							</view>
							<view class="my-orders-item-time">
								<text>下单时间：2021-02-02 11:01</text>
								<text>合计：<text style="color: #000000;font-weight: bold;font-size: 28rpx;">&yen;12.4</text></text>
							</view>
						</view>
					</view>
				</van-tab>
				<van-tab title="未支付">
					<view class="my-orders-box">
						<view class="my-orders-item">
							<view class="my-orders-item-title">
								<text class="my-orders-item-title-l">32号桌</text>
								<text class="my-orders-item-title-r">未支付</text>
							</view>
							<view class="my-orders-item-content">
								<view class="my-orders-item-content-l">
									<scroll-view scroll-x style="width: calc(100vw - 200rpx);height: 100%;white-space: nowrap;">
										<view class="my-orders-item-scroll" v-for="i in 8" :key="i">
											<van-image radius="8rpx" width="100rpx" height="100rpx" src="https://img.yzcdn.cn/vant/cat.jpeg" />
											<view class="my-orders-item-scroll-title">醉逍遥</view>
										</view>
									</scroll-view>
								</view>
								<view class="my-orders-item-content-r">
									<text class="my-orders-item-content-r2">共</text>
									<text class="my-orders-item-content-r2">170</text>
									<text class="my-orders-item-content-r2">件</text>
								</view>
							</view>
							<view class="my-orders-item-time">
								<text>下单时间：2021-02-02 11:01</text>
								<text>合计：<text style="color: #000000;font-weight: bold;font-size: 28rpx;">&yen;12.4</text></text>
							</view>
							<view style="text-align: right;padding-top: 16rpx;">
								<van-button round size="mini" type="danger">支付</van-button>
							</view>
						</view>
					</view>
				</van-tab>
			</van-tabs>
			<!-- <van-empty description="暂无订单记录~">
				<view style="width: 280rpx;">
					<van-button block round color="#db3231" @click="toPage">
						<text style="font-size: 36rpx;">去下单</text>
					</van-button>
				</view>
			</van-empty> -->
			<!-- <van-cell-group :border="false">
				<van-cell v-for="item in list" :key="item" value-class="history-value" center size="large" title="已支付(微信)" value="500.00元"
					label="2010-10-10 10:10:10" />
			</van-cell-group>
			<view class="loading-text">
				<text>{{finished && loading ? '没有更多了' : '加载中...'}}</text>
			</view> -->
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				trigger: false,
				finished: false,
				loading: false,
				list: [],
				pageNo: 1,
				pageSize: 20,
				total: 23,
				active: 0,
				toms: [1, 2, 3]
			}
		},
		computed: {
			height() {
				return this.scrollviewHeilght - 46 + 'px'
			}
		},
		methods: {
			getList() {
				setTimeout(() => {
					let list = [];
					for (let i = 0; i < 9; i++) {
						list.push(i + 1);
					};
					this.list = list;
					this.finished = list.length <= this.total;
					uni.hideLoading();
				}, 1000)
			},
			toPage() {
				this.$slNavigateTo('/pages/home/chargeCenter')
			},
			// 自定义下拉刷新被触发
			handleRefresh() {
				this.finished = false;
				this.trigger = true;
			},
			// 触底
			handleLower() {
				console.log('-触底');
			},
			onChange() {

			}
		}
	}
</script>

<style lang="scss">
	.history-value {
		color: #db3231 !important;
		font-size: 36rpx;
		font-weight: bold;
	}

	.bottom-button {
		width: 160px;
		height: 40px;
	}
</style>
<style lang="scss" scoped>
	.loading-text {
		text-align: center;
		color: #999999;
		font-size: 28rpx;
		line-height: 28rpx;
		padding: 16rpx 0;
	}

	.my-orders-box {
		padding: 32rpx;
		.my-orders-item {
			padding: 32rpx;
			border-radius: 8rpx;
			background-color: #fff;
			margin-bottom: 32rpx;
			.my-orders-item-title {
				height: 56rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.my-orders-item-title-l {
					color: #000000;
					font-size: 36rpx;
				}
				.my-orders-item-title-r {
					color: #EE0A24;
					font-size: 24rpx;
				}
			}
			.my-orders-item-content {
				display: flex;
				height: 140rpx;
				margin: 16rpx 0;
				.my-orders-item-content-l {
					flex: 1;
					.my-orders-item-scroll {
						width: 100rpx;
						height: 140rpx;
						margin-right: 16rpx;
						display: inline-block;
						&:last-child {
							margin-right: 0;
						}
						.my-orders-item-scroll-title {
							text-align: center;
							font-size: 24rpx;
							line-height: 24rpx;
							color: #666;
						}
					}
				}
				.my-orders-item-content-r {
					width: 48rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.my-orders-item-content-r2 {
						color: #333;
						font-size: 24rpx;
					}
				}
			}
			.my-orders-item-time {
				font-size: 24rpx;
				color: #000;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
	}
</style>
